<template>
  <div class="totalPage">
    <div class="chat-sidebar">
      <div class="searchfor">
        <input
          type="text"
          v-model="searchKeyword"
          class="searchinput"
          @keyup.enter="searchContacts"
          placeholder="输入关键字查询联系人..."
        />
        <span class="search-icon" @click="searchContacts">🔍</span>
      </div>
      <div
        v-for="user in users"
        :key="user.id"
        @click="selectUser(user)"
        class="chat-item"
        :class="{
          topped: user.top,
          matched: user.isMatched,
          selected: user.id === senderid,
        }"
      >
        <img :src="user.avatar" alt="User Avatar" class="avatar" />
        <div class="info">
          <div class="name" :class="{ 'red-point': user.message_count }">
            {{ user.name }}
          </div>
          <div v-if="isImageDataUrl(user.latestMessage)" class="latest-message">
            [图片]
          </div>
          <div v-else class="latest-message">{{ user.latestMessage }}</div>
          <div class="{ 'red-point': unreadMessagesCount > 0 }"></div>
        </div>
        <div class="latesttime"></div>
      </div>
      <div class="nomore">没有更多了</div>
    </div>
    <div class="chat-container">
      <div class="sender">
        {{ this.sendername }}
        <button id="set-as-top" class="top-button" @click="setAsTop">
          置顶
        </button>
      </div>
      <div class="topcolumn" v-for="item in user_data" :key="item.id">
        {{ item.title }}
        <div class="price" v-for="item in user_data" :key="item.id">
          {{ item.price }}￥
        </div>
      </div>
      <div id="chat-log"></div>
      <div class="input-container">
        <div class="upbutton">
          <button id="chat-emoji-button" class="emoji-button">😊</button>
          <button
            id="chat-image-button"
            class="image-button"
            @click="openImageUploader"
          >
            🖼️
          </button>
        </div>
        <textarea
          id="chat-message-input"
          type="text"
          class="input-field"
          @keyup.enter="chat_message_submit"
        ></textarea>
        <button
          id="chat-message-submit"
          class="send-button"
          @click="chat_message_submit"
        >
          发送
        </button>
      </div>
      <div id="image-preview-container" class="image-preview-container">
        <button
          id="close-image-preview-button"
          class="close-image-preview-button"
          @click="closeImagePreview"
        >
          ✕
        </button>
        <button
          id="send-image-button"
          class="send-image-button"
          @click="sendImage"
        >
          发送图片
        </button>
      </div>
      <div id="modal" class="modal">
        <span class="close">&times;</span>
        <img id="modal-image" class="modal-content" src="" />
      </div>
      <div id="emoji-selector" class="emoji-selector">
        <button class="emoji" data-emoji="😀">😀</button>
        <button class="emoji" data-emoji="😁">😁</button>
        <button class="emoji" data-emoji="😂">😂</button>
        <button class="emoji" data-emoji="😄">😄</button>
        <button class="emoji" data-emoji="😅">😅</button>
        <button class="emoji" data-emoji="😇">😇</button>
        <br />
        <button class="emoji" data-emoji="😍">😍</button>
        <button class="emoji" data-emoji="😘">😘</button>
        <button class="emoji" data-emoji="🤗">🤗</button>
        <button class="emoji" data-emoji="😵‍💫">😵‍💫</button>
        <button class="emoji" data-emoji="🥳">🥳</button>
        <button class="emoji" data-emoji="🧐">🧐</button>
      </div>
      <!-- 添加更多表情按钮 -->
    </div>
  </div>
</template>
<script>
import { ElNotification } from "element-plus";

export default {
  data() {
    return {
      roomName: null,
      chatSocket: null,
      emojiSelectorVisible: false,
      senderid: null,
      orderid: "", //需要改，联动左边点击切换id
      user_id: "",
      user_data: null,
      group: null,
      users: [],
      sendername: null,
      searchKeyword: [],
    };
  },
  mounted() {
    // 要先获取userid，才能进行下一步
    const params = new URLSearchParams();
    this.axios.post("http://127.0.0.1:8000/get_userid/", params).then((res) => {
      if (res.data.success === 1) {
        this.user_id = res.data.userid;
        print(this.user_id);
        var currentURL = window.location.href;

        // 使用正则表达式匹配并提取最后一段内容
        var match = currentURL.match(/\/chatPage\/(-?\d+)(?:\/\?)?/);
        if (match && match[1]) {
          // 提取的内容在match[1]中
          this.roomName = match[1];
          // // console.log(this.roomname", this.roomName);
          if (this.roomName !== "") {
            this.init();
            this.Request();

            this.getMsg(); // 当前用户登录了，获取是否有新消息
          } else {
            // // console.log(roomName为空");
          }
        } else {
          // // console.log(未找到匹配的URL段");
        }
      } else {
        // // console.log(false return");
      }
    });
  },

  methods: {
    init() {
      // 根据roomName拼接websocket请求地址，建立长连接
      // 请求url地址为/ws/chat/<room_name>/
      const wss_protocol =
        window.location.protocol === "https:" ? "wss://" : "ws://";

      this.chatSocket = new WebSocket(
        wss_protocol +
          "127.0.0.1:8000/ws/chat/" +
          this.roomName +
          "/" +
          this.user_id +
          "/"
      );
      this.chatSocket.onerror = (error) => {
        console.error("WebSocket连接发生错误:", error);
      };
      const params = new URLSearchParams();
      params.append("user_id", this.user_id);
      params.append("group", this.roomName);
      this.axios
        .post("http://127.0.0.1:8000/get_senderid/", params)
        .then((res) => {
          this.senderid = res.data.senderid;
          this.sendername = res.data.sendername;
        });

      // 从后台接收到数据时触发此方法
      // 接收到后台数据后对其解析，并加入到聊天记录chat-log
      let previousTime = null;
      this.chatSocket.onmessage = (e) => {
        const data = JSON.parse(e.data);
        this.sender_id = data.sender;

        this.id = data.id; // 记录消息的序号
        // 发送消息给后端，标记该消息为已读
        const params = new URLSearchParams();
        params.append("id", this.id);
        this.axios.post("http://127.0.0.1:8000/read_msg/", params);

        const chatContainer = document.getElementById("chat-log");
        chatContainer.scrollTop =
          chatContainer.scrollHeight - chatContainer.clientHeight;
        const messageElement = document.createElement("div");
        const totalElement = document.createElement("div");
        messageElement.classList.add("message");
        const user_id_string = this.user_id.toString();
        messageElement.classList.add(
          data.sender === this.user_id || data.sender === user_id_string
            ? "user-message"
            : "bot-message"
        );
        const isImageDataUrl = /^data:image\/(jpeg|png|gif);base64/i.test(
          data.message
        );
        if (isImageDataUrl) {
          const imageElement = document.createElement("img");
          imageElement.classList.add("messageimg");
          imageElement.src = data.message;
          imageElement.alt = "Image";
          messageElement.appendChild(imageElement);
          const modal = document.getElementById("modal");
          const modalImage = document.getElementById("modal-image");
          const closeBtn = document.querySelector(".close");

          imageElement.addEventListener("click", () => {
            modal.style.display = "block";
            modalImage.src = data.message;
          });

          closeBtn.addEventListener("click", () => {
            modal.style.display = "none";
          });
        } else {
          const pattern = /订单号：(\d+)\nsender_id：(\d+)/;
          console.log("看这里", pattern);
          // 搜索字符串
          const match = pattern.exec(data.message);
          console.log("看这里", match);
          console.log("看这里", data.sender);

          if (data.sender === 0 && match) {
            var matchResult = data.message.match(/(.+)(\n订单号：\d+)/);
            var contentBeforeOrderNumber = matchResult[1];
            messageElement.textContent = contentBeforeOrderNumber;

            const pattern2 = /发送接单申请！\n订单号：(\d+)\nsender_id：(\d+)/;
            const match2 = pattern2.exec(data.message);
            if (match2) {
              const orderId = match[1];
              const senderId = match[2];
              // 创建按钮元素
              const button1 = document.createElement("button");
              button1.textContent = "同意";
              button1.addEventListener("click", () => {
                // 处理按钮1的点击事件
                // // console.log(Button 1 clicked");

                const params = new URLSearchParams();
                params.append("order_id", orderId);
                params.append("target_id", senderId);

                this.axios
                  .post("http://127.0.0.1:8000/accept_order/", params)
                  .then((res) => {
                    if (res.data.success) {
                      ElNotification({
                        title: "同意成功",
                        message: "已成功同意用户接单！",
                        type: "success",
                      });
                    } else {
                      ElNotification({
                        title: "请求失败",
                        message: res.data.error,
                        type: "error",
                      });
                    }
                  });
              });

              const button2 = document.createElement("button");
              button2.textContent = "拒绝";
              button2.addEventListener("click", () => {
                // 处理按钮2的点击事件
                // // console.log(Button 2 clicked");

                const params = new URLSearchParams();
                params.append("order_id", orderId);
                params.append("target_id", senderId);

                this.axios
                  .post("http://127.0.0.1:8000/reject_order/", params)
                  .then((res) => {
                    if (res.data.success) {
                      ElNotification({
                        title: "拒绝成功",
                        message: "已成功拒绝用户接单！",
                        type: "success",
                      });
                    } else {
                      ElNotification({
                        title: "请求失败",
                        message: res.data.error,
                        type: "error",
                      });
                    }
                  });
              });

              const button3 = document.createElement("button");
              button3.textContent = "忽略";
              button3.addEventListener("click", () => {
                // 哈哈你被忽略了
                ElNotification({
                  title: "忽略成功！",
                  message: "成功忽略该请求！",
                  type: "success",
                });
              });

              // 将按钮添加到聊天记录中
              totalElement.appendChild(button1);
              totalElement.appendChild(button2);
              totalElement.appendChild(button3);
            }
          } else {
            messageElement.textContent = data.message;
          }
        }

        // 将 messageElement 添加到 totalElement
        totalElement.appendChild(messageElement);

        // 添加头像元素
        const avatarElement = document.createElement("img");
        avatarElement.classList.add("avatar");
        avatarElement.src =
          data.senderavatar ||
          "";
        if (data.sender === this.user_id || data.sender === user_id_string) {
          totalElement.appendChild(avatarElement);
          totalElement.classList.add("usermessage");
        } else {
          totalElement.insertBefore(avatarElement, totalElement.firstChild);
          totalElement.classList.add("botmessage");
        }

        const currentTime = new Date(data.time);
        if (!previousTime || currentTime - previousTime > 180000) {
          const timeElement = document.createElement("div");
          timeElement.classList.add("message-time");
          timeElement.textContent = data.time;
          chatContainer.appendChild(timeElement);
          previousTime = currentTime;
        }
        chatContainer.appendChild(totalElement);
      };
      // 添加表情元素
      const emojiButton = document.getElementById("chat-emoji-button");
      const emojiSelector = document.getElementById("emoji-selector");
      const messageInput = document.getElementById("chat-message-input");

      emojiButton.addEventListener("click", () => {
        if (this.emojiSelectorVisible) {
          emojiSelector.style.display = "none";
        } else {
          emojiSelector.style.display = "block";
        }
        this.emojiSelectorVisible = !this.emojiSelectorVisible;
      });

      const emojis = emojiSelector.querySelectorAll(".emoji");
      emojis.forEach((emoji) => {
        emoji.addEventListener("click", () => {
          const selectedEmoji = emoji.getAttribute("data-emoji");
          messageInput.value += selectedEmoji;
          emojiSelector.style.display = "none";
          this.emojiSelectorVisible = false;
        });
      });

      // websocket连接断开时触发此方法
      this.chatSocket.onclose = (e) => {
        console.log(e);
        console.error("Chat socket closed unexpectedly");
      };
    },
    setAsTop() {
      if (this.senderid) {
        const index = this.users.findIndex((user) => user.id === this.senderid);
        if (index !== -1) {
          const user = this.users[index];
          user.top = !user.top;

          // 如果取消置顶，找到应该放置的位置
          if (!user.top) {
            let insertIndex = this.users.findIndex(
              (u) => !u.top && u.id !== user.id
            );
            if (insertIndex === -1) {
              insertIndex = this.users.length;
            }
            this.users.splice(index, 1);
            this.users.splice(insertIndex, 0, user);
          } else {
            this.users.splice(index, 1);
            this.users.splice(0, 0, user);
          }

          const params = new URLSearchParams();
          params.append("group", this.roomName);
          params.append("user_id", this.user_id);
          params.append("top", user.top ? 1 : 0);

          this.axios
            .post("http://127.0.0.1:8000/update_top/", params)
            .then((res) => {
              if (res.data.success) {
                // console.log(user.top ? "置顶成功" : "取消置顶成功");
              }
            });
        }
      }
    },
    searchContacts() {
      const keyword = this.searchKeyword.trim();
      if (keyword !== "") {
        const matchedUsers = this.users.filter((user) =>
          user.name.includes(keyword)
        );
        if (matchedUsers.length > 0) {
          this.users.forEach((user) => {
            user.isMatched = matchedUsers.some(
              (matchedUser) => matchedUser.id === user.id
            );
          });
          const matchedUserIndexes = matchedUsers.map((matchedUser) =>
            this.users.findIndex((user) => user.id === matchedUser.id)
          );

          for (let i = 0; i < matchedUserIndexes.length; i++) {
            const index = matchedUserIndexes[i];
            if (index !== -1) {
              const user = this.users[index];
              this.users.splice(index, 1);
              this.users.splice(0, 0, user);
            }
          }
        } else {
          this.users.forEach((user) => {
            user.isMatched = false;
            this.searchKeyword = "查找无结果！";
          });
        }
      }
    },
    isImageDataUrl(message) {
      return /^data:image\/(jpeg|png|gif);base64/i.test(message);
    },
    selectUser(user) {
      this.senderid = user.id;
      const params = new URLSearchParams();
      params.append("sender_id", user.id);
      params.append("receiver_id", this.user_id);
      // console.log(user.id, this.user_id);
      this.axios
        .post("http://127.0.0.1:8000/get_group/", params)
        .then((res) => {
          // // console.log(res.data.group", res.data.group);
          this.group = res.data.group;
          this.$nextTick(() => {
            this.$router.push("/chatPage/" + this.group);
            // 在路由跳转后，等待一小段时间再执行刷新
            setTimeout(() => {
              location.reload();
            }, 100);
          });
        });
    },

    chat_message_submit() {
      const messageInputDom = document.querySelector("#chat-message-input");
      const message = messageInputDom.value;

      //注意这里:先把文本数据转成json格式,然后调用send方法发送。
      this.chatSocket.send(
        JSON.stringify({
          message: message,
        })
      );
      messageInputDom.value = "";
      // location.reload();
      const targetUser = this.users.find((u) => u.id === this.senderid);
      // console.log(this.senderid);
      if (targetUser) {
        targetUser.latestMessage = message;
      }

      this.users = this.users.sort((a, b) => {
        if (b.top !== a.top) {
          return b.top - a.top;
        }
        if (a.id === this.senderid) {
          return -1;
        } else if (b.id === this.senderid) {
          return 1;
        } else {
          const dateA = new Date(a.latestTime);
          const dateB = new Date(b.latestTime);
          return dateB - dateA;
        }
      });
    },
    openImageUploader() {
      const inputElement = document.createElement("input");
      inputElement.type = "file";
      inputElement.accept = "image/*";
      inputElement.addEventListener("change", this.handleImageUpload);
      inputElement.click();
    },
    handleImageUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageUrl = e.target.result;
        this.showImagePreview(imageUrl);
      };
      reader.readAsDataURL(file);
    },
    showImagePreview(imageUrl) {
      const imagePreviewContainer = document.getElementById(
        "image-preview-container"
      );
      const imagePreview = document.createElement("img");
      imagePreview.classList.add("showimg");
      imagePreview.src = imageUrl;
      imagePreviewContainer.appendChild(imagePreview);
      imagePreviewContainer.style.display = "block"; // 显示 image-preview-container
    },
    closeImagePreview() {
      const imagePreviewContainer = document.getElementById(
        "image-preview-container"
      );
      const previewImages = document.querySelectorAll(".showimg"); // 选择特定类名的元素
      previewImages.forEach((image) => {
        image.remove(); // 清空特定类名的元素
      });
      imagePreviewContainer.style.display = "none";
    },
    sendImage() {
      const imageUrl = document.querySelector(
        "#image-preview-container img"
      ).src;
      this.chatSocket.send(
        JSON.stringify({
          message: imageUrl,
        })
      );
      // 清空图片预览
      const imagePreviewContainer = document.getElementById(
        "image-preview-container"
      );
      imagePreviewContainer.innerHTML = "";
      imagePreviewContainer.style.display = "none"; // 隐藏 image-preview-container
      // setTimeout(() => {
      //     location.reload();
      // }, 100);
    },

    Request() {
      const params = new URLSearchParams();
      params.append("user_id", this.user_id);
      this.axios
        .post("http://127.0.0.1:8000/get_chaters/", params)
        .then((res) => {
          if (res.data.success) {
            this.users = res.data.users.map((user) => {
              return Object.assign({}, user, { message_count: 0 });
            });

            // Sort the users based on your existing sorting logic
            this.users.sort((a, b) => {
              if (b.top !== a.top) {
                return b.top - a.top;
              }
              const dateA = new Date(a.latestTime);
              const dateB = new Date(b.latestTime);
              return dateB - dateA;
            });
          }
          // else {
          //     this.is_login = false;
          //     ElNotification({
          //         title: '未登录',
          //         message: '您暂未登录，请登录后再试',
          //         type: "error",
          //     });
          //     router.push({name: 'home'});
          // }
        });
      if (this.orderid !== "") {
        const dataArray = [this.orderid];
        this.axios
          .post("http://127.0.0.1:8000/get_order/", JSON.stringify(dataArray))
          .then((res) => {
            if (res.data.success) {
              this.user_data = res.data.data;
              // console.log(res.data.data);
            }
          });
      }
    },

    getMsg() {
      // 使用长轮询
      var xhr = new XMLHttpRequest();
      xhr.open(
        "GET",
        `http://127.0.0.1:8000/msg_poll/?userid=${this.user_id}`,
        true
      );

      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var data = JSON.parse(xhr.responseText);
          // 处理从服务器接收到的数据，例如更新UI
          // // console.log(chat Received data:", data);
          this.users.forEach((user) => {
            // // console.log(out");
            // console.log(data, user);
            // Check if the user id exists in the data object
            // console.log(data, user.id);
            if (
              Object.prototype.hasOwnProperty.call(data, user.id.toString())
            ) {
              // // console.log(inner");
              // Update the latestMessage and latestTime values
              user.latestMessage = data[user.id].latest_content;
              user.latestTime = data[user.id].latestTime; // Assuming data[user.id] has latestTime property
              user.message_count = data[user.id].message_count;
              // // console.log(this.user", user);
            }
          });

          // 递归调用以启动下一个长轮询
          this.getMsg();
        } else if (xhr.readyState == 4) {
          // 处理其他状态码或错误
          console.error("Error during long polling:", xhr.status);

          // 递归调用以启动下一个长轮询
          this.getMsg();
        }
      };

      xhr.send();
    },
  },
};
</script>
<style>
.chat-container {
  max-width: 650px;
  margin: 0 auto;
  margin-top: 5vh;
  margin-left: 10px;
  margin-bottom: 5vh;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.topcolumn {
  padding: 15px;
  display: flex;
  color: dimgray;
  background: linear-gradient(to right, #cde8dc, #ffffff);
}

.sender {
  padding: 10px;
  padding-left: 20px;

  display: flex;
  justify-content: space-between;
}

.price {
  padding-left: 20px;
  color: red;
}

.top-button {
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background-color: #666699;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

#chat-log {
  height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 消息在上侧对齐 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  border-radius: 0;
  padding-bottom: 100px;
}

#chat-log:hover::-webkit-scrollbar {
  width: 15.5px;
  height: 5px;
  /* 设置滚动条的宽度 */
}

#chat-log:hover::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 6px;
}

#chat-log:hover::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* 设置滚动条轨道的背景颜色 */
}

#chat-log::-webkit-scrollbar {
  visibility: hidden;
}

.upbutton {
  padding-left: 10px;
  margin-top: 0;
}

.emoji-button {
  border: none;
  background-color: #f9f9f9;
  font-size: 25px;
}

.image-button {
  border: none;
  padding-left: 10px;
  background-color: #f9f9f9;
  font-size: 25px;
}

#emoji-selector {
  display: none;
  position: absolute;
  top: 57.3vh;
  left: 50;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  /* 确保弹窗显示在其他元素之上 */
}

#image-preview-container {
  display: none;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 30%;
  left: 56%;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  /* 确保弹窗显示在其他元素之上 */
}

.send-image-button {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 7px 14px;
  margin: 5px;
  border: none;
  border-radius: 8px;
  background-color: #666699;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.close-image-preview-button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  border: none;
  background-color: transparent;
  color: #ff0000;
  cursor: pointer;
  font-size: 15px;
}

/* 设置表情样式 */
.emoji {
  font-size: 24px;
  margin: 5px;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

.emoji:hover {
  transform: scale(1.2);
}

.input-container {
  display: float;
  align-items: center;
}

.input-field {
  flex: 1;
  padding: 20px;
  padding-top: 10px;
  border: none;
  outline: none;
  height: 60px;
  overflow-y: auto;
  font-size: 18px;
  width: 93%;
  resize: none;
  background-color: #f9f9f9;
}

.input-field::-webkit-scrollbar {
  width: 5px;
}

.send-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: #666699;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  margin-left: 570px;
  margin-bottom: 10px;
}

.send-button:hover {
  background-color: #666699ba;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  max-width: 300px;
  word-wrap: break-word;
}

.usermessage {
  display: flex;
  margin-left: auto;
}

.botmessage {
  display: flex;
}

.user-message {
  background-color: rgb(54, 52, 55);
  color: #fff;
  margin-left: auto;
}

.bot-message {
  background-color: rgb(218, 218, 218);
  margin-left: 0;
}

.message-time {
  background-color: rgb(218, 218, 218);
  padding: 3px;
  font-size: 12px;
  color: #ffffff;
  margin-left: 40%;
  margin-top: 20px;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  margin-left: 7px;
  margin-right: 7px;
}

.showimg {
  padding-top: 20px;
  max-width: 180px;
  max-height: 150px;
}

.messageimg {
  width: 200px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  padding-top: 50px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

.chat-sidebar {
  width: 350px;
  /* height: 600px; */
  margin-top: 5vh;
  margin-bottom: 5vh;
  margin-left: 20vh;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.chat-item {
  display: flex;
  padding: 10px;
  max-width: 350px;
  cursor: pointer;
  height: 75px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item:hover {
  background-color: #e0e0e0;
}

.selected {
  background-color: #ebe8e8;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name {
  font-weight: bold;
}

.latest-message {
  color: #666;
}

.totalPage {
  display: flex;
  background: linear-gradient(rgba(211, 194, 246, 0.795), white);
  height: 90vh;
}

.searchfor {
  display: flex;
  height: 50px;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.searchinput {
  width: 280px;
  margin-top: 3px;
  margin-left: 10px;
  padding: 5px;
  border-radius: 3px;
  border: 2px solid #f0f0f0;
}

.search-icon {
  /* position: absolute;
  top: 15vh;
  left: 62vh; */
  /* 调整图标距离右侧的位置 */
  font-size: 18px;
  cursor: pointer;
}

.nomore {
  margin-left: 138px;
  color: #666;
  font-size: small;
}

.chat-item.topped {
  background-color: #ccc;
}

.chat-item.matched {
  background-color: rgb(201, 207, 233);
}

.message-count-dot {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.dot {
  width: 16px;
  height: 16px;
  background-color: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.count {
  color: white;
  font-size: 12px;
  font-weight: bold; /* Optional: Make the count text bold */
}

.red-point {
  position: relative;
}

.red-point::before {
  content: " ";
  border: 4.5px solid red; /*设置红色*/
  border-radius: 4.5px; /*设置圆角*/
  position: absolute;
  z-index: 1000;
  right: 0;
  margin-right: -8px;
}
</style>
